import { IPlank, Order } from '@/types';
import { Button, ConfigProvider, Modal, Table, TableColumnType } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect, useRef, useState } from 'react';
import { OrderInfoAlert } from './OrderInfoAlert';
import { transformColumns, useColumnSearch } from '@/hooks/useColumnSearch';
import classNames from 'classnames';
import { useBoolean } from 'ahooks';

const log = console.log.bind(null, '[PlankSelect]');

const columns: ColumnsType<IPlank> = [
  {
    title: '序号',
    dataIndex: 'order',
    render: (_text, _record, index) => index + 1,
  },
  {
    title: '唯一码',
    dataIndex: 'code',
  },
  {
    title: '产品名称',
    dataIndex: 'productName',
  },
  {
    title: '产品ID',
    dataIndex: 'productId',
  },
  {
    title: '名称',
    dataIndex: 'name',
  },
  {
    title: '长',
    dataIndex: 'finishedWidth',
  },
  {
    title: '宽',
    dataIndex: 'finishedHeight',
  },
  {
    title: '厚',
    dataIndex: 'thickness',
  },
];
const searchDataIndexs = ['code', 'productName', 'productId', 'name'];

interface Props {
  order: Order;
  dataSource: IPlank[];
  onConfirm(data: IPlank): void;
}
const PlankSelect: React.FC<Props> = (props) => {
  const [isModalVisible, setIsModalVisible] = useState(true);
  const [selected, setSelected] = useState<IPlank>();
  const selectedRowKeys = selected && [selected.code];
  const { orderName, orderNo } = props.order;

  const [isConfirm, { setTrue: confirm }] = useBoolean();
  const disableOk = !selected;
  const disableCancel = !isConfirm;

  useEffect(() => {
    // log(props.dataSource)
  }, []);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    if (!selected) {
      alert('未选择数据');
      return;
    }
    log('onConfirm', { selected });
    props.onConfirm(selected);
    setIsModalVisible(false);
    confirm();
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const { getColumnSearchProps } = useColumnSearch();
  const newColumns: TableColumnType<any>[] = transformColumns(
    columns as TableColumnType<any>[],
    searchDataIndexs,
    getColumnSearchProps,
  );

  return (
    <>
      <Button onClick={showModal}>物料选择</Button>
      <Modal
        title="物料选择"
        open={isModalVisible}
        onOk={handleOk}
        onCancel={!disableCancel ? handleCancel : undefined}
        width={1045}
        closeIcon={!disableCancel}
        cancelButtonProps={{ className: classNames({ hidden: disableCancel }) }}
        maskClosable={!disableCancel}
        okButtonProps={{ disabled: disableOk }}
      >
        <ConfigProvider
          componentSize="small"
          theme={{ token: { fontSize: 12 } }}
        >
          <OrderInfoAlert orderName={orderName} orderCode={orderNo} />
          <Table
            scroll={{ x: 'max-content', y: 500 }}
            bordered
            rowKey={'code'}
            onRow={(record) => {
              return {
                onClick: () => {
                  setSelected(record);
                },
              };
            }}
            rowSelection={{
              type: 'radio',
              selectedRowKeys,
              onSelect(record) {
                setSelected(record);
              },
            }}
            columns={newColumns}
            pagination={{ defaultPageSize: 5 }}
            dataSource={props.dataSource}
          />
        </ConfigProvider>
      </Modal>
    </>
  );
};

export default PlankSelect;
